<template>
  <div id="app">
  	<transition name="slide-top">
		<keep-alive>
		<router-view v-if="$route.meta.keepAlive" class="router-box"></router-view>
		</keep-alive>	
    </transition>
	<transition name="slide-top">
		<router-view v-if="!$route.meta.keepAlive" class="router-box"></router-view>

	</transition>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style scoped>
#app {
	height: 100%;
	font-size: 0.28rem;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.router-box {  
	  position: absolute;  
	  left: 0;  
	  top: 0rem;  
	  width: 100%;  
	  height: 100%;  
	  transition: all .4s cubic-bezier(.55,0,.1,1);  
	}  
	.slide-top-enter, .slide-right-leave-active {  
	  opacity: 0;  
	  -webkit-transform: translate(0, 100%);  
	  transform: translate(0, 100%);  
	}  
	.slide-top-leave-active, .slide-right-enter {  
	  opacity: 0;  
	  -webkit-transform: translate(0, 100%);  
	  transform: translate(0, 100%);  
	}
</style>
